<template>
  <div>
    <div>
      <el-card class="content">
        <el-row>
          <el-col :span="5">
            <span>通知类型名称：</span>
            <el-select
              placeholder="请输入通知类型"
              style="width: 200px"
              size="mini"
              v-model="query.type"
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button class="black-button" size="small" @click="getSearch"
              >查询</el-button
            >
            <el-button
              @click="dialog_flag = true"
              type="primary"
              icon="el-icon-plus"
              size="small"
              >新增</el-button
            >
          </el-col>
        </el-row>
        <p class="bg-purple">预警阈值管理列表</p>
        <el-table
          stripe
          size="small"
          :data="getWarningLsit"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            label="测点名称"
            prop="monitorPointName"
          ></el-table-column>
          <el-table-column
            label="测点类型名称"
            prop="monitorTypeName"
          ></el-table-column>
          <el-table-column
            label="尾矿库名称"
            prop="tailingPondName"
            width="240px"
          ></el-table-column>
          <el-table-column
            label="一级预警阈值(mm)"
            prop="firstLevel"
          ></el-table-column>
          <el-table-column
            label="二级预警阈值(mm)"
            prop="secondLevel"
          ></el-table-column>
          <el-table-column
            label="三级预警阈值(mm)"
            prop="thirdLevel"
          ></el-table-column>
          <el-table-column label="通知类型" prop="type">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0">绝对位移预警</span>
              <span v-if="scope.row.type == 1">相对位移预警</span>
            </template>
          </el-table-column>
          <el-table-column label="修改时间" prop="updateTime"></el-table-column>
          <el-table-column label="操作" prop="id" width="120px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="updateWarning(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delWarningList(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10]"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <!-- 新增弹窗 -->
      <el-dialog
        title="添加预警阈值管理"
        :visible.sync="dialog_flag"
        width="30%"
      >
        <el-form
          ref="addWarningList"
          label-position="left"
          label-width="150px"
          :model="addWarningList"
          :rules="rules"
        >
          <el-form-item label="尾矿库" prop="tailingPondId">
            <el-select
              placeholder="请选择尾矿库"
              v-model="addWarningList.tailingPondId"
              style="display: flex"
              @change="addStations"
            >
              <el-option
                v-for="item in tailingList"
                :key="item.id"
                :label="item.tailingName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测点类型" prop="monitorTypeId">
            <el-select
              placeholder="请选择测点类型"
              v-model="addWarningList.monitorTypeId"
              style="display: flex"
              :disabled="stationDisable"
              @change="addStation"
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测点" prop="monitorPointId">
            <el-select
              placeholder="请选择测点"
              v-model="addWarningList.monitorPointId"
              :disabled="addDisabled"
              style="display: flex"
            >
              <el-option
                v-for="item in getMonitorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="通知类型" prop="type">
            <el-select
              placeholder="请选择通知类型"
              style="display: flex"
              v-model="addWarningList.type"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="一级预警阈值(mm)" prop="firstLevel">
            <el-input
              placeholder="请输入一级预警阈值(mm)"
              v-model.trim="addWarningList.firstLevel"
              oninput="value=value.replace(/[^\d^\.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级预警阈值(mm)" prop="secondLevel">
            <el-input
              placeholder="请输入二级预警阈值(mm)"
              v-model.trim="addWarningList.secondLevel"
              oninput="value=value.replace(/[^\d^\.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="三级预警阈值(mm)" prop="thirdLevel">
            <el-input
              placeholder="请输入三级预警阈值(mm)"
              oninput="value=value.replace(/[^\d^\.]/g,'')"
              v-model.trim="addWarningList.thirdLevel"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addWarningThres">确定</el-button>
            <el-button @click="closeWarning">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        title="修改预警阈值管理"
        :visible.sync="editDialogflag"
        width="30%"
      >
        <el-form
          ref="editWarningList"
          label-position="left"
          label-width="150px"
          :model="editWarningList"
          :rules="rules"
        >
          <el-form-item label="尾矿库" prop="tailingPondId">
            <el-select
              placeholder="请选择尾矿库"
              v-model="editWarningList.tailingPondId"
              style="display: flex"
              @change="editTailing"
            >
              <el-option
                v-for="item in tailingList"
                :key="item.id"
                :label="item.tailingName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测点类型" prop="monitorTypeId">
            <el-select
              placeholder="请选择测点类型"
              v-model="editWarningList.monitorTypeId"
              style="display: flex"
              :disabled="editDisa"
              @change="editStation"
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测点" prop="monitorPointId">
            <el-select
              placeholder="请选择测点"
              v-model="editWarningList.monitorPointId"
              style="display: flex"
            >
              <el-option
                v-for="item in getMonitorListEdit"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="通知类型" prop="type">
            <el-select
              placeholder="请选择通知类型"
              style="display: flex"
              v-model="editWarningList.type"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="一级预警阈值(mm)" prop="firstLevel">
            <el-input
              placeholder="请输入一级预警阈值(mm)"
              v-model="editWarningList.firstLevel"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级预警阈值(mm)" prop="secondLevel">
            <el-input
              placeholder="请输入二级预警阈值(mm)"
              v-model="editWarningList.secondLevel"
            ></el-input>
          </el-form-item>
          <el-form-item label="三级预警阈值(mm)" prop="thirdLevel">
            <el-input
              placeholder="请输入三级预警阈值(mm)"
              v-model="editWarningList.thirdLevel"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editWarningThres">确定</el-button>
            <el-button @click="closeWarning">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MiddleLabel from "~/components/MiddleLabel";
import axios from "axios";
import {
  getwarningThresholdByPage,
  getMonitorTypeList,
  getTailingPondList,
  getMonitorPointList,
} from "../../../api/api";
export default {
  name: "SurfaceDisplacement",
  components: {
    MiddleLabel,
  },
  data() {
    return {
      index: 0,
      dialog_flag: false,
      editDialogflag: false,
      query: {
        page: 1,
        pagesize: 10,
        type: null,
      },
      typeList: [
        { id: 0, name: "绝对位移预警" },
        { id: 1, name: "相对位移预警" },
      ],
      stationList: [],
      total: null,
      addDisabled: true,
      addDisabledStation: true,
      getWarningLsit: [],
      getMonitorList: [],
      tailingList: [],
      addWarningList: {
        monitorPointId: null,
        tailingPondId: null,
        unitId: sessionStorage.getItem("unitId"),
        type: null,
        firstLevel: null,
        secondLevel: null,
        thirdLevel: null,
        monitorTypeId: null,
      },
      editWarningList: {
        monitorPointId: null,
        tailingPondId: null,
        unitId: sessionStorage.getItem("unitId"),
        type: null,
        firstLevel: null,
        secondLevel: null,
        thirdLevel: null,
        id: null,
        monitorTypeId: null,
      },
      stationDisable: true,
      rules: {
        tailingPondId: [
          { required: true, message: "请选择尾矿库", trigger: "change" },
        ],
        monitorTypeId: [
          { required: true, message: "请选择测点类型", trigger: "change" },
        ],
        monitorPointId: [
          { required: true, message: "请选择测点", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择通知类型", trigger: "change" },
        ],
        firstLevel: [
          {
            required: true,
            message: "请输入一级预警阈值(mm)",
            trigger: "blur",
          },
        ],
        secondLevel: [
          {
            required: true,
            message: "请输入二级预警阈值(mm)",
            trigger: "blur",
          },
        ],
        thirdLevel: [
          {
            required: true,
            message: "请输入三级预警阈值(mm)",
            trigger: "blur",
          },
        ],
      },
      getMonitorListEdit: [],
      editDisa: false,
    };
  },
  methods: {
    //分页获取
    async getWarningThresholdPage() {
      const res = await getwarningThresholdByPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        type: this.query.type,
      });
      console.log(res);
      this.getWarningLsit = res.parameter.list;
      this.total = res.parameter.total;
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getWarningThresholdPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getWarningThresholdPage();
    },
    // 查询按钮
    async getSearch() {
      const res = await getwarningThresholdByPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        type: this.query.type,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.$message.success({
          message: "成功查询数据",
          offset: 400,
          duration: 1000,
        });
        this.getWarningLsit = res.parameter.list;
        this.total = res.parameter.total;
      } else {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
        this.getWarningLsit = [];
      }
    },
    //获取尾矿库名称
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      console.log(res);
      this.tailingList = res.parameter;
    },
    //测点类型名称
    async getStationLists() {
      const res = await getMonitorTypeList();
      this.stationList = res.parameter;
    },
    addStations() {
      this.addWarningList.monitorTypeId = null;
      this.addWarningList.monitorPointId = null;
      if (this.addWarningList.tailingPondId == null) {
        this.stationDisable = true;
      } else {
        this.stationDisable = false;
      }
    },
    addStation() {
      if (this.addWarningList.monitorTypeId == null) {
        this.addDisabled = true;
      } else {
        axios({
          method: "get",
          url: `/monitorPoint/getMonitorPointList/`,
          params: {
            monitorTypeId: this.addWarningList.monitorTypeId,
            tailingPondId: this.addWarningList.tailingPondId,
          },
        }).then((res) => {
          this.addDisabled = false;
          if (res.data.resultCode == "200") {
            this.getMonitorList = res.data.parameter;
            console.log(this.getMonitorList);
          } else if (res.data.resultCode == "204") {
            this.getMonitorList = [];
          }
        });
      }
    },
    editTailing() {
      this.editWarningList.monitorTypeId = "";
      this.editWarningList.monitorPointId = "";
      if (this.editWarningList.tailingPondId == null) {
        this.stationDisable = true;
      } else {
        this.stationDisable = false;
      }
    },
    editStation() {
      axios({
        method: "get",
        url: `/monitorPoint/getMonitorPointList/`,
        params: {
          monitorTypeId: this.editWarningList.monitorTypeId,
          tailingPondId: this.editWarningList.tailingPondId,
        },
      }).then((res) => {
        console.log(res);
        this.addDisabled = false;
        if (res.data.resultCode == "200") {
          this.getMonitorListEdit = res.data.parameter;
          console.log(this.getMonitorListEdit);
        } else if (res.data.resultCode == "204") {
          this.getMonitorListEdit = [];
          console.log(this.getMonitorListEdit);
        }
      });
    },
    //添加
    addWarningThres() {
      this.$refs.addWarningList.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.addWarningList)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/warningThreshold/addWarningThreshold",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.$message.success({
                message: "新增成功",
                offset: 400,
                duration: 1000,
              });
              this.dialog_flag = false;
              this.getWarningThresholdPage();
            } else if (res.data.resultCode == "400") {
              this.$message.error({
                message: "新增失败",
                offset: 400,
                duration: 1000,
              });
              this.dialog_flag = false;
            } else if (res.data.resultCode == "423") {
              this.$message.error({
                message: res.data.message,
                offset: 400,
                duration: 1000,
              });
            }
          });
        } else {
          this.$message.error({
            message: "请完成表单项",
            offset: 400,
            duration: 1000,
          });
        }
      });
      this.$refs.addWarningList.resetFields();
      this.addDisabled = true;
      this.stationDisable = true;
    },
    closeWarning() {
      this.dialog_flag = false;
      this.editDialogflag = false;
      this.addDisabled = true;
      this.stationDisable = true;
      this.$refs.addWarningList.resetFields();
    },
    //修改
    updateWarning(row) {
      axios({
        method: "get",
        url: `/monitorPoint/getMonitorPointList/`,
        params: {
          monitorTypeId: row.monitorTypeId,
          tailingPondId: row.tailingPondId,
        },
      }).then((res) => {
        console.log(res);
        this.addDisabled = false;
        if (res.data.resultCode == "200") {
          this.getMonitorListEdit = res.data.parameter;
        } else if (res.data.resultCode == "204") {
          this.getMonitorListEdit = [];
        }
      });
      this.editWarningList.monitorPointId = row.monitorPointId;
      this.editWarningList.tailingPondId = row.tailingPondId;
      this.editWarningList.unitId = row.unitId;
      this.editWarningList.type = row.type;
      this.editWarningList.firstLevel = row.firstLevel;
      this.editWarningList.secondLevel = row.secondLevel;
      this.editWarningList.thirdLevel = row.thirdLevel;
      this.editWarningList.id = row.id;
      this.editWarningList.monitorTypeId = row.monitorTypeId;
      this.editDialogflag = true;
    },
    editWarningThres() {
      this.$refs.editWarningList.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.editWarningList)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/warningThreshold/updateWarningThreshold",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.$message.success({
                message: "修改成功",
                offset: 400,
                duration: 1000,
              });
              this.editDialogflag = false;
              this.getWarningThresholdPage();
            } else if (res.data.resultCode == "400") {
              this.$message.error({
                message: "修改失败",
                offset: 400,
                duration: 1000,
              });
              this.editDialogflag = false;
            } else {
              this.$message.error({
                message: "请完成表单",
                offset: 400,
                duration: 1000,
              });
            }
          });
        }
      });
    },
    //删除
    delWarningList(id) {
      this.$confirm("确定删除吗？")
        .then((_) => {
          axios({
            method: "get",
            url: "/warningThreshold/deleteWarningThreshold/" + `${id}`,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.getWarningThresholdPage();
              this.$message.success({
                message: "删除成功",
                offset: 400,
                duration: 1000,
              });
            } else if (res.data.resultCode == "400") {
              this.$message.error({
                message: "删除失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
        })
        .catch((_) => {
          this.$message.info({
            message: "已取消删除",
            offset: 400,
            duration: 1000,
          });
        });
    },
  },
  mounted() {
    this.getWarningThresholdPage();
    this.getTailingList();
    this.getStationLists();
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow-y: auto;
}
.el-button {
  margin-bottom: 8px;
  font-size: 14px;
}
.black-button {
  background-color: black;
  color: white;
}
.bg-purple {
  background: #d3dce6;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding-left: 10px;
}
.el-table {
  display: block;
  height: 67.2vh;
  overflow-y: auto;
  margin-bottom: 15px;
}
.el-table::before {
  z-index: inherit;
}
</style>
